import { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function CardList() {
  const [value, setValue] = useState("");
  const modules = {
    toolbar: [
      ["bold", "italic"],
      ["link", "image"],
    ],
  };

  return (
    <div>
      <ReactQuill
        theme="snow"
        value={value}
        modules={modules}
        onChange={setValue}
      />
      <hr />
      {/*
        上面将 value 数据传递给后端存在数据库之后，后续某个页面调用接口获取回来的这串数据该如何显示呢？
        "<p></p>"
        v-html="xxx"

      */}
      {/*<div>{value}</div>*/}
      <div dangerouslySetInnerHTML={{ __html: value }}></div>
    </div>
  );
}

export default CardList;

// import { Editor, EditorState } from "draft-js";
// import "draft-js/dist/Draft.css";
// import { useState } from "react";
//
// const CardList = () => {
//   const [editorState, setEditorState] = useState(EditorState.createEmpty());
//   function handleChange(aaa: any) {
//     setEditorState(aaa);
//   }
//
//   return (
//     <div>
//       <Editor editorState={editorState} onChange={handleChange} />
//     </div>
//   );
// };
//
// export default CardList;
